<template>
	<view class="">
		<!-- <view class="list" :style="{width:width+'rpx',height:height+'rpx'}"> -->
			<!-- <view class="name">收货地址</view> -->
			<picker class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex"
				@change="pickerChange" @columnchange="pickerColumnchange">
				<view class="pbox">
					<view class="labelTxt" :class="{'labelTxt--active' : regionStr != ''}">
						{{ regionStr ? regionStr : '请选择地区' }}
					</view>
					<!-- <text class="iconfont icon-you"></text> -->
				</view>
			</picker>
		<!-- </view> -->
	</view>
</template>
<script>
	import region from './chinaRegion.json'
	export default {
		data() {
			return {
				// 原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0, 0],
 
				// 选择的id
				// previnceId: 11,
				// cityId: 1101,
				// districtId: 110101,
				// countyId: 110101001
 
				// 省市区字符串
				// regionStr: '请选择省/市/区/镇或县'
			};
		},
		props: {
			// 组件高度
			height: {
				type: [Number],
				default: 92
			},
			// 组件宽度
			width: {
				type: [Number],
				default: 710
			},
			// 省id
			previnceId: {
				type: [Number],
				default: 11
			},
			// 市辖区id
			cityId: {
				type: [Number],
				default: 1101
			},
			// 区id
			districtId: {
				type: [Number],
				default: 110101
			},
			// 县
			countyid: {
				type: [Number],
				default: 110101001
			},
			// 是否是为修改(true为修改)
			isRevise: {
				type: [Boolean],
				default: false
			},
			regionStr: {
				type: [String],
				default: ''
			},
			// address: {
			// 	type: [String],
			// 	default: ''
			// }
		},
		methods: {
			pickerChange(e) {
				this.regionIndex = e.detail.value;
				// this.regionStr = this.region[0][this.regionIndex[0]].name + 
				// this.region[1][this.regionIndex[1]].name +
				// this.region[2][this.regionIndex[2]].name + 
				// this.region[3][this.regionIndex[3]].name;
                //组件传值
				const lastName = this.region[3].length>0?this.region[3][this.regionIndex[3]].name:''
                //组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].name , this.region[1][this.regionIndex[1]].name,
				this.region[2][this.regionIndex[2]].name ,lastName] );
			},
			pickerColumnchange(e) {
				// console.log(e);
				// // 第几列滑动
				// console.log(e.detail.column);
				// // 第几列滑动的下标
				// console.log(e.detail.value)
 
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let districtArr = [];
					let countyArr = []
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0, 0];
					// 改变市辖区列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					// console.log('cityArr1', cityArr)
					this.$set(this.region, 1, cityArr);
					// 没有港澳台的详细地区信息 制空
					if(cityArr.length==0){
						this.$set(this.region, 2, cityArr);
						this.$set(this.region, 3, cityArr);
					}
					//因为港澳台没有地址信息，children会报错，所以有children的时候再渲染
					if (this.oldRegion[e.detail.value].children && this.oldRegion[e.detail.value].children[0]) {
						// 改变区列表
						this.oldRegion[e.detail.value].children[0].children.map(item => {
							districtArr.push({
								name: item.name,
								code: item.code
							});
						})
						// console.log('districtArr1', districtArr)
						this.$set(this.region, 2, districtArr);
						//改变县镇列表
						this.oldRegion[e.detail.value].children[0].children[0].children.map(item => {
							countyArr.push({
								name: item.name,
								code: item.code
							});
						})
						this.$set(this.region, 3, countyArr);
						// console.log('countyArr1', countyArr)
					}
 
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					this.regionIndex[3] = 0;
					let districtArr = [];
					let countyArr = [];
					if (this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]]) {
						this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
							districtArr.push({
								name: item.name,
								code: item.code
							});
						})
						this.$set(this.region, 2, districtArr);
						this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children[0].children.map(
							item => {
								countyArr.push({
									name: item.name,
									code: item.code
								});
							})
						this.$set(this.region, 3, countyArr);
					}
 
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
					this.regionIndex[3] = 0;
					let countyArr = [];
					if (this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]]) {
						this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children[this.regionIndex[2]]
							.children.map(item => {
								countyArr.push({
									name: item.name,
									code: item.code
								});
							})
						// console.log('countyArr3',countyArr)
						this.$set(this.region, 3, countyArr);
					}
 
				}
				if (e.detail.column === 3) {
					this.regionIndex[3] = e.detail.value;
				}
			}
		},
		created() {
			let provinceArr = [];
			let cityArr = [];
			let districtArr = [];
			//获取regin[]
			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.districtId == item.code) {
					districtArr = item.children;
					this.regionIndex[2] = index;
				}
			})
			districtArr.map((item, index) => {
				this.region[3].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code) {
					this.regionIndex[3] = index;
				}
			})
			// if (this.isRevise) {
			// 	this.regionStr = this.region[0][this.regionIndex[0]].name + 
			// 	this.region[1][this.regionIndex[1]].name +
			// 	this.region[2][this.regionIndex[2]].name;
			// 	console.log("111");
			// } else {
			// 	console.log("222");
			// 	// this.regionStr = this.$t('enter_location_address');
			// 	this.regionStr = this.address;
			// }
		}
	}
</script>
 
<style lang="scss">
	
	.picker {
		width: 100%;
		flex: 1;
		.pbox {
			flex: 1;
			font-size: 28upx;
			border: none;

			.icon-you {
				font-size: 28rpx;
			}
			
			.labelTxt{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			
			.labelTxt--active{
				color: #000000;
			}
			 
		}

	}

	.name {
		width: 168rpx;
		font-size: 32rpx;
		color: #383838;
	}

	.icon-you {
		font-size: 28rpx;
		color: #999999;
	}

	.input {
		flex: 1;
		height: 100%;
		color: #9080A1;
	}

	.textarea {
		flex: 1;
		height: 100%;
		color: #A9A9A9;
	}
	
	
</style>